<template>
  <ve-chart
    :judge-width="true"
    :loading="loading"
    :data="chartData"
    :settings="chartSetting"
    :extend='chartExtends'
    :colors="colors"
    height="340px"
  />
</template>

<script>
import chartMixin from '@/mixins/sf/chart-mixin'

export default {
  mixins: [chartMixin],
  props: {
    chartType: {
      type: String,
      default: 'histogram'
    },
    columns: {
      type: Array,
      default: () => ['mode', 'percent']
    },
    customSettings: {
      type: Object,
      default: () => {}
    },
    yAxisName: {
      type: String,
      default: ''
    },
    index: {
      type: Number,
      default: 0
    },
    loading: {
      type: Boolean,
      default: false
    },
    rawData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    // this.colors = [this.getRandomColor()]
    this.colors = ['#19d4ae']
    return {
    }
  },
  computed: {
    chartSetting () {
      return {
        type: this.chartType,
        // labelMap: {
        //   'y': this.index === 0 ? '白天时间段使用' : '晚上时间段使用'
        // },
        labelMap: {
          'y': '使用占比'
        },
        yAxisName: [this.yAxisName],
        // xAxisName: [this.index === 0 ? '白天' : '夜晚'],
        yAxisType: ['percent'], // 坐标轴值百分比
        digit: 2,
        dataType: {
          'y': 'percent'
        }
      }
    },
    chartData () {
      return {
        columns: this.columns,
        rows: this.rawData
      }
    },
    chartExtends () {
      return Object.assign({}, this.chartExtend, this.customSettings)
    }
  }
}
</script>
